<script>

import PersonPage from '@/components/person/index'
import FilePage from '@/components/file/index'
import {getMain, saveMain , getUserTime} from '@/api/index'
import XEUtils from 'xe-utils'

export default {
  name: "index",
  components: {
    PersonPage,
    FilePage,
  },
  data() {
    var validatePersonSize = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请填写主创信息'));
      } else if (value.length > 5) {
        callback(new Error('主创信息不可以超过5个'));
      } else {
        callback();
      }
    };
    return {
      totalSize: 1024 * 2 * 1024 * 1024,
      form: {
        id: "",
        name: "",
        mainWay: "",
        otherWays: [],
        description: "",
        persons: [],
        files: []
      },
      rules: {
        name: [
          {required: true, message: "请输入您的作品名称", trigger: "blur"}
        ],
        mainWay: [
          {required: true, message: "请选择您的参赛方向", trigger: "blur"}
        ],
        otherWays: [
          {required: true, message: "请选择您的参赛方向", trigger: "blur"}
        ],
        description: [
          {required: true, message: "请输入您的成果介绍", trigger: "blur"}
        ],
        persons: [
          {required: true, message: "请填写您的主创人员信息", trigger: "blur"},
          {validator: validatePersonSize, trigger: 'blur'}
        ],
        files: [
          {required: true, message: "请上传您的成功文件", trigger: "blur"}
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const size = XEUtils.sum(XEUtils.pluck(this.form.files,'size'))
          if (size > this.totalSize){
            this.$message.error('上传文件的总大小不能超过2GB.');
          }else {
            if (this.form && this.form.files && this.form.files.length > 0){
              let flag = true;
              XEUtils.arrayEach(this.form.files, (item, key) => {
                if (item.status === 'uploading'){
                  flag = false;
                }
              })
              if (flag){
                saveMain(this.form).then((res) => {
                  if (res && res.data && res.data.success) {
                    this.$message.success('提交成功');
                  } else {
                    this.$message.error('提交失败,请稍后重试.');
                  }
                })
              }else {
                this.$message.warning('请等待文件上传完成后再提交.');
              }
            }
          }
        }
      });
    }
  },
  mounted() {
    if (this.$route.query.s) {
      getUserTime(this.$route.query.s).then((res) => {
        if (res && res.data && res.data.success) {
          this.form.id = res.data.data;
          getMain(this.form.id).then(res => {
            if (res && res.data && res.data.success) {
              this.form = res.data.data
            } else {
              this.$message.error('数据请求失败,请稍后重试.');
            }
          })
        }else {
          this.$message.error('链接已失效,请重新申请.');
        }
      })
    }
  }
}
</script>

<template>
  <el-container>
    <el-header height="300px;">
      <div class="header-up">
        <div class="header-title">
          海选阶段成果提交 Creative Selection Entry Submission
        </div>
        <div class="header-logo">
          <img src="@/assets/logo.png" alt="logo">
        </div>
      </div>
      <div class="header-down">
       <el-icon class="el-icon-upload"></el-icon> &nbsp成果提交截止时间 Submission Deadline 2025.06.10 22:00
      </div>
    </el-header>
    <el-main>
      <div class="main-content">
        <el-form ref="form" :rules="rules" :model="form" label-width="130px">
              <el-form-item prop="id">
                <template slot="label">
                  参赛编号
                  <br>
                  ID
                </template>
                <el-input v-model="form.id" size="small" clearable readonly/>
              </el-form-item>
              <el-form-item prop="name">
                <template slot="label">
                  作品名称
                  <br>
                  Entry Name
                </template>
                <el-input v-model="form.name" size="small" clearable/>
              </el-form-item>

              <div class="warp-ways">
                <div style="width: 120px;margin-left: 20px;padding-top: 6px;float: left;font-size: 14px;font-weight: bold;color: #0053B7!important;">
                  参赛方向
                  <br>
                  Direction
                </div>

                <div class="warp-ways-body" style="padding-top: 10px;">
                  <el-form-item prop="mainWay" label-width="0" style="padding-left: 0!important;">
                    <div>
                      <div class="way-title">
                        <el-tooltip content="只可选择一个" placement="bottom">
                          <i class="header-icon el-icon-info"></i>
                        </el-tooltip>&nbsp主方向(仅可选择一个) <br>
                        <span>
                          &nbsp &nbsp Main Direction (You must choose only one direction)
                        </span>
                      </div>
                      <div class="way-body">
                        <div class="radio-tr">
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="1">
                              <div class="radio-text">
                                <div class="radio-text-up">建设有温度的公共空间</div>
                                <br>
                                <div class="radio-text-down">
                                  Creating Warm Public Spaces
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="2">
                              <div class="radio-text">
                                <div class="radio-text-up">搜索智慧生态社区</div>
                                <br>
                                <div class="radio-text-down">
                                  Exploring Smart Ecological Communities
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="3">
                              <div class="radio-text">
                                <div class="radio-text-up">面向未来生活的公共服务</div>
                                <br>
                                <div class="radio-text-down">
                                  Public Service for Future Living
                                </div>
                              </div>
                            </el-radio>
                          </div>
                        </div>

                        <div class="radio-tr" style="margin-top: 15px;">
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="4">
                              <div class="radio-text">
                                <div class="radio-text-up">构建智慧集成的未来交通技术</div>
                                <br>
                                <div class="radio-text-down">
                                  Building an Intelligence-integrate Testbed for Future <br>
                                  Transportation Technology
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="5">
                              <div class="radio-text">
                                <div class="radio-text-up">打造创新发展的低空经济场景</div>
                                <br>
                                <div class="radio-text-down">
                                  Creating Innovative New Scenarios for Low-Altitude  <br>
                                  Economy Development
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="6">
                              <div class="radio-text">
                                <div class="radio-text-up">尝试未来新型建筑</div>
                                <br>
                                <div class="radio-text-down">
                                  Experimenting with Future New Architecture
                                </div>
                              </div>
                            </el-radio>
                          </div>
                        </div>

                        <div class="radio-tr" style="margin-top: 15px;">
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="7">
                              <div class="radio-text">
                                <div class="radio-text-up">具有科技人文魅力的艺术家具</div>
                                <br>
                                <div class="radio-text-down">
                                  Creating Art Furniture with Technological and <br>
                                  Humanistic Charm
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="8">
                              <div class="radio-text">
                                <div class="radio-text-up">基于元宇宙虚实交融的公共活动</div>
                                <br>
                                <div class="radio-text-down">
                                  Constructing a Virtual-real Interactive Public <br>
                                  Space based on Metaverse
                                </div>
                              </div>
                            </el-radio>
                          </div>
                          <div class="radio-td">
                            <el-radio v-model="form.mainWay" label="9">
                              <div class="radio-text">
                                <div class="radio-text-up">其他您能想到的设计创意</div>
                                <br>
                                <div class="radio-text-down">
                                  Other Design Innovations
                                </div>
                              </div>
                            </el-radio>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-form-item>

                  <el-form-item prop="otherWays" label-width="0" style="padding-left: 0!important;">
                    <div>
                      <div class="way-title">
                        <el-tooltip content="可选择不超过3个" placement="bottom">
                          <i class="header-icon el-icon-info"></i>
                        </el-tooltip> &nbsp次方向(可选择不超过三个) <br>
                        &nbsp &nbsp &nbsp Other Directions (You may choose no more than three directions)
                      </div>
                    </div>
                    <div class="way-body">
                      <div class="radio-tr">
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="1">
                            <div class="radio-text">
                              <div class="radio-text-up">建设有温度的公共空间</div>
                              <br>
                              <div class="radio-text-down">
                                Creating Warm Public Spaces
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="2">
                            <div class="radio-text">
                              <div class="radio-text-up">搜索智慧生态社区</div>
                              <br>
                              <div class="radio-text-down">
                                Exploring Smart Ecological Communities
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="3">
                            <div class="radio-text">
                              <div class="radio-text-up">面向未来生活的公共服务</div>
                              <br>
                              <div class="radio-text-down">
                                Public Service for Future Living
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                      </div>
                      <div class="radio-tr" style="margin-top: 15px;">
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="4">
                            <div class="radio-text">
                              <div class="radio-text-up">构建智慧集成的未来交通技术</div>
                              <br>
                              <div class="radio-text-down">
                                Building an Intelligence-integrate Testbed for Future <br>
                                Transportation Technology
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="5">
                            <div class="radio-text">
                              <div class="radio-text-up">打造创新发展的低空经济场景</div>
                              <br>
                              <div class="radio-text-down">
                                Creating Innovative New Scenarios for Low-Altitude  <br>
                                Economy Development
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="6">
                            <div class="radio-text">
                              <div class="radio-text-up">尝试未来新型建筑</div>
                              <br>
                              <div class="radio-text-down">
                                Experimenting with Future New Architecture
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                      </div>
                      <div class="radio-tr" style="margin-top: 15px;">
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="7">
                            <div class="radio-text">
                              <div class="radio-text-up">具有科技人文魅力的艺术家具</div>
                              <br>
                              <div class="radio-text-down">
                                Creating Art Furniture with Technological and <br>
                                Humanistic Charm
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="8">
                            <div class="radio-text">
                              <div class="radio-text-up">基于元宇宙虚实交融的公共活动</div>
                              <br>
                              <div class="radio-text-down">
                                Constructing a Virtual-real Interactive Public  <br>
                                Space based on Metaverse
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                        <div class="radio-td">
                          <el-checkbox v-model="form.otherWays" label="9">
                            <div class="radio-text">
                              <div class="radio-text-up">其他您能想到的设计创意</div>
                              <br>
                              <div class="radio-text-down">
                                Other Design Innovations
                              </div>
                            </div>
                          </el-checkbox>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>

              <el-form-item prop="description">
                <template slot="label">
                  成果介绍
                  <br>
                  Brief Introduction
                </template>
                <el-input
                  :rows="10"
                  type="textarea"
                  clearable
                  placeholder="请输入成果介绍"
                  v-model="form.description">
                </el-input>
              </el-form-item>
              <el-form-item prop="persons">
                <template slot="label">
                  主创信息
                  <br>
                  Chief Designer
                </template>
                <PersonPage v-model="form.persons" :mainId="form.id" :formData="form" field="persons"/>
              </el-form-item>

              <el-form-item prop="files">
                <template slot="label">
                  成果上传
                  <br>
                  Upload
                </template>
                <FilePage v-model="form.files" :mainId="form.id" :formData="form" field="files"
                          tips="请上传您的成果文件，单文件大小不超过500M，文件个数不限."/>
              </el-form-item>
        </el-form>
        <div class="submit-btn">
          <el-button type="primary" @click="submitForm()">确认并提交 Submit</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>

.el-container,
.el-header,
.el-main {
  padding: 0;
  margin: 0;
  width: 100%;
  background-color: #E3F2FD;
}

.el-container {
  max-width: 1200px;
  margin: 0 auto;
}

.el-main {
  padding: 10px 10px;
}

.el-header {
  padding: 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
  background: linear-gradient(#90CAF9, #E3F2FD);
}

/deep/ .el-form-item__label {
  text-align: left!important;
  font-weight: bold;
  color: #0053B7!important;
}

.warp-ways {
  display: flex;
}

.warp-ways-body {
  flex: 1;
}

.header-up {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  color: #0053B7;
}

.header-down {
  width: 100%;
  text-align: left;
  font-size: 17px;
  margin-top: 10px;
  color: #0053B7;
}

img {
  height: 32px;
}

/deep/ .el-radio__inner {
  border: 1px solid #C0C4CC;
}

.el-checkbox,
.el-radio {
  display: flex;
}

.way-title,
.radio-text-up {
  padding-top: 0!important;
  font-size: 16px!important;
  font-weight: bold!important;
  color: #0053B7!important;
  line-height: 20px;
}

/deep/ .el-checkbox__label {
 line-height: 15px;
}

.radio-text-down {
  font-size: 14px!important;
  color: #74B1ED!important;
  letter-spacing: -1px;
}

.radio-tr {
  padding-top: 15px;
  width: 100%;
  display: flex;
}

.radio-td {
  width: 33%;
}

/deep/ textarea , /deep/ input , /deep/ .el-radio__inner , /deep/ .el-checkbox__inner{
  background-color: #FFFFFF;
}

.main-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-form-item {
  padding-left: 15px;
  padding-right: 15px;
}

.radio-group-item {
  margin-top: 10px;
}

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
}

/deep/ .el-collapse-item__wrap {
  border-bottom: none!important;
}

/deep/ .el-collapse {
  border-bottom: none!important;
}

/deep/ .el-collapse-item__header {
  background-color: #f4f5f8;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  color: #333;
}

/deep/ .el-collapse-item__content {
  padding: 10px;
  padding-bottom: 0px;
}

/deep/ .el-form-item__label {
  line-height: normal;
}
</style>
